<link rel="stylesheet" href="../lib/bootstrap-icons/font/bootstrap-icons.min.css">
<link rel="stylesheet" href="../lib/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="../lib/overlayscrollbars/styles/overlayscrollbars.min.css">
<link rel="stylesheet" href="../dist/css/bootstrap-admin.min.css">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="col-10 pt-2">
    <!--            这里显示商品列表-->
    <!--            themlyme模板显示-->
    <div class="row text-center">
        <div class="col-9"></div>
        <div class="col-3">
            <a data-toggle="modal" data-target="#modalAdd" class="btn btn-warning">新增</a>
        </div>
    </div>
    <table class="table table-bordered">
        <thead>
        <th>序号</th>
        <th>书名</th>
        <th>作者</th>
        <th>数量</th>
        <th>价格</th>
        <th>出版社</th>
        <th>类型</th>
        </thead>
        <tr th:each="book:${data}">
            <td th:text="${book.getId()}"></td>
            <td th:text="${book.bookname}"></td>
            <td th:text="${book.getAuthor()}"></td>
            <td th:text="${book.getNumber()}"></td>
            <td th:text="${book.getPricing()}"></td>
            <td th:text="${book.getPublishers()}"></td>
            <td th:text="${book.getType()}"></td>
            <td>
                <button class="btn btn-danger" th:onclick="del([[${book.getId()}]])">删除</button>
                <button data-toggle="modal" data-target="#modalUpdate" class="btn btn-info"
                        th:onclick="update([[${book.getId()}]],[[${book.bookname}]],
                                [[${book.getAuthor()}]],[[${book.getNumber()}]],[[${book.getPricing()}]],[[${book.getPublishers()}]],[[${book.getType()}]])">更新</button>
            </td>
        </tr>
    </table>
</div>
<!--    模态框测试-->
<!-- 定义一个新增的子窗体模态框（Modal）HTML代码 -->
<div class="modal fade" id="modalAdd" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" style="max-width: 80%;">
        <div class="modal-content">
            <div class="modal-header bg-success text-white">
                <h4 class="modal-title text-center" id="myModalLabel">添加图书</h4>
            </div>
            <div class="modal-body p-4">
                <!-- 新增表单区 -->
                <form action="/book/bookAddProcess" method="post">
                    <div class="row">
                        <div class="col-md-6">
                            <label for="bookname" class="text-muted">书名</label>
                            <input type="text" name="bookname" id="" class="form-control mb-3">
                        </div>
                        <div class="col-md-6">
                            <label for="author" class="text-muted">作者</label>
                            <input type="text" name="author" id="" class="form-control mb-3">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <label for="number" class="text-muted">数量</label>
                            <input type="text" name="number" id="" class="form-control mb-3">
                        </div>
                        <div class="col-md-6">
                            <label for="pricing" class="text-muted">价格</label>
                            <input type="text" name="pricing" id="" class="form-control mb-3">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <label for="publishers" class="text-muted">出版社</label>
                            <input type="text" name="publishers" id="" class="form-control mb-3">
                        </div>
                        <div class="col-md-6">
                            <label for="type" class="text-muted">类型</label>
                            <input type="text" name="type" id="" class="form-control mb-3">
                        </div>
                    </div>
                    <div class="text-center mt-3">
                        <input type="submit" value="提交" class="btn btn-success">
                        <button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button>
                    </div>
                </form>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
<!--  定义更新子窗体模态框代码区-->
<!-- 模态框（Modal） -->
<div class="modal fade" id="modalUpdate" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" style="max-width: 80%;">
        <div class="modal-content">
            <div class="modal-header bg-info text-white">
                <h4 class="modal-title text-center" id="myModalLabel">更新图书</h4>
            </div>
            <div class="modal-body p-4">
                <form action="/api/bookUpdateProcess" method="post">
                    <div class="row">
                        <div class="col-md-6">
                            <label for="id" class="text-muted">序号</label>
                            <input type="text" name="id" id="Id" disabled="disabled" class="form-control mb-3">
                        </div>
                        <div class="col-md-6">
                            <label for="bookname" class="text-muted">书名</label>
                            <input type="text" name="bookname" id="bookname" class="form-control mb-3">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <label for="author" class="text-muted">作者</label>
                            <input type="text" name="author" id="author" class="form-control mb-3">
                        </div>
                        <div class="col-md-6">
                            <label for="number" class="text-muted">数量</label>
                            <input type="text" name="number" id="number" class="form-control mb-3">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <label for="pricing" class="text-muted">价格</label>
                            <input type="text" name="pricing" id="pricing" class="form-control mb-3">
                        </div>
                        <div class="col-md-6">
                            <label for="publishers" class="text-muted">出版社</label>
                            <input type="text" name="publishers" id="publishers" class="form-control mb-3">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <label for="type" class="text-muted">类型</label>
                            <input type="text" name="type" id="type" class="form-control mb-3">
                        </div>
                    </div>
                    <div class="text-center mt-3">
                        <button type="button" class="btn btn-info" id="btnUpdate">更新</button>
                        <button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button>
                    </div>
                </form>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>

<script src="../js/jquery.js"></script>
<script src="../js/bootstrap.js"></script>
<script>
    function update(id,bookname,author,number,pricing,publishers,type) {
        //     肯定有了这个商品的信息，包括商品的所有字段值
        console.log(id, bookname, number, pricing)
        //     单独去给更新代码块的表单
        $('#Id').val(id);
        $('#bookname').val(bookname);
        $('#author').val(author);
        $('#number').val(number);
        $('#pricing').val(pricing);
        $('#publishers').val(publishers);
        $('#type').val(type);
    }
        // 使用ajax方式提交更新处理
        $('#btnUpdate').click(function(){
            var flag=confirm("确认提交更新？");
            if(flag==true){
                $.post("/api/bookUpdateProcess",{"id":$('#Id').val(),"bookname":$('#bookname').val(),'author':$('#author').val(),
                    "number":$('#number').val(),'pricing':$('#pricing').val(),'publishers':$('#publishers').val(),'type':$('#type').val()
                },function (res){
                    if (res==1){
                        alert("更新ok");
                        location.href="/book/bookList";
                    }else {
                        alert("更新失败");
                    }
                })
            }
        })
    function del(id){
        var flag = confirm("是否删除该条记录");
        if(flag==true) {
            // 使用ajax方法传参交给后端去处理
            $.post("/api/bookDelete", {"id": id}, function (res) {
                console.log(res)
                if (res == 1) {
                    alert("删除成功！");
                    location.reload();
                } else {
                    alert("删除失败!");
                    location.reload();
                }
            })
        }
    }

</script>